<template>
  <view>
    <transition name="slide">
      <view v-if="showInfo" class="backShadow" @click.self="closePopup">
        <view class="content" :class="{ 'slide-out': slideOut }" @click.stop>
          <view class="animated">
            <view class="info_app">
              <view class="main">
                <scroll-view class="container" scroll-y>
                  <view class="require-container">
                    <text class="require-title"
                      >请根据贵司具体情况，查询合作品类的准入要求</text
                    >
                    <view class="require-form">
                      <view class="require-form-group">
                        <text class="require-label">供应商性质</text>
                        <view class="require-options">
                          <view
                            :class="[
                              'require-option',
                              { active: supplierType === 'trader' },
                            ]"
                            @click="setSupplierType('trader')"
                            >贸易商</view
                          >
                          <view
                            :class="[
                              'require-option',
                              { active: supplierType === 'manufacturer' },
                            ]"
                            @click="setSupplierType('manufacturer')"
                            >厂家直供/生产商</view
                          >
                        </view>
                      </view>
                      <view
                        class="require-form-group"
                        style="display: flex; align-content: center"
                      >
                        <text class="require-label">商品原产地</text>
                        <view class="require-options" style="margin-left: 30px">
                          <view
                            style="width: 100px"
                            :class="[
                              'require-option',
                              { active: origin === 'domestic' },
                            ]"
                            @click="setOrigin('domestic')"
                            >国产</view
                          >
                          <view
                            style="width: 100px"
                            :class="[
                              'require-option',
                              { active: origin === 'imported' },
                            ]"
                            @click="setOrigin('imported')"
                            >进口</view
                          >
                        </view>
                      </view>
                      <view class="require-form-group">
                        <text class="require-label">供应品类</text>
                        <picker
                          mode="selector"
                          :range="categories"
                          @change="onCategoryChange"
                        >
                          <view class="require-picker">
                            <text>{{ selectedCategory }}</text>
                            <text class="require-arrow">⌄</text>
                          </view>
                        </picker>
                      </view>
                      <button class="require-submit-button" @click="submit">
                        查 询
                      </button>
                    </view>
                  </view>
                </scroll-view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </transition>
  </view>
</template>
  
  <script>
export default {
  data() {
    return {
      showInfo: false,
      agreementChecked: false,
      slideOut: false,
      supplierType: "trader", // 默认选中贸易商
      origin: "domestic", // 默认选中国产
      categories: ["请选择", "食品", "电子产品", "服装", "其他"], // 供应品类选项
      selectedCategory: "请选择", // 默认选中的供应品类
    };
  },
  methods: {
    setSupplierType(type) {
      this.supplierType = type;
    },
    setOrigin(type) {
      this.origin = type;
    },
    onCategoryChange(e) {
      this.selectedCategory = this.categories[e.detail.value];
    },
    submit() {
      // 提交表单逻辑
      console.log("供应商性质:", this.supplierType);
      console.log("商品原产地:", this.origin);
      console.log("供应品类:", this.selectedCategory);
    },
    toggle(index) {
      this.list[index].open = !this.list[index].open;
    },
    handlerApply() {
      this.showInfo = true;
      this.slideOut = false;
    },
    closePopup() {
      this.slideOut = true;
      setTimeout(() => {
        this.showInfo = false;
        this.slideOut = false;
      }, 500);
    },
  },
};
</script>
  
  <style>
@import "./prepare_require.scss";
@import "./common_problem.scss";
@keyframes slideInFromBottom {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0%);
  }
}
@keyframes slideOutToBottom {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(100%);
  }
}
.animated {
  animation: slideInFromBottom 0.5s ease;
}
.slide-out {
  animation: slideOutToBottom 0.5s ease;
}
.slide-enter-active,
.slide-leave-active {
  transition: transform 0.5s;
}
.slide-enter,
.slide-leave-to {
  transform: translateY(100%);
}
.backShadow {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 背景阴影 */
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end; /* 内容在底部 */
  z-index: 99;
}
/* background-color: white;  */
.content {
  /* background-color: #f5f5f5; */
  background: linear-gradient(to bottom, #e8f5e9, #f5fff5);
  width: 100%;
  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1); /* 外层阴影 */
  padding: 20px;
  border-radius: 8px 8px 0 0;
}
.next {
  background: #00a651;
}
.info_app {
  width: 100%;
  display: flex;
  align-items: center;
}
.main {
  width: 100%;
}
.main h2 {
  line-height: 60px;
  text-align: center;
}
.main p {
  margin-left: 5%;
  line-height: 40px;
}
.footer_app {
  display: flex;
  justify-content: space-around;
}
.footer_app .btn {
  width: 40%;
}

.btn::after {
  border: indianred;
}
</style>